<template>
	<div class='pages record-list'>
		<div class='record-list-body'>
			<div class='record-list-item' :class="{'active': activeTab == index}" v-for="(item, index) in bottoms" :key="item.id">
				

				<prompt class='cover' :hidden="prompt.hidden" :title="prompt.title" :text="prompt.text"></prompt>
				<Spin size="large" class='loading' fix v-if="loading"></Spin>
			</div>
		</div>


		<div class='bottom'>
			<div class='bottom-item' v-for="(item, index) in bottoms" :key="item.id" :class="{
				'active': activeTab == index}" @click="to(item, index)">
				<Icon :type="item.icon" class='icon'></Icon>
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import DefaultWrap  from 'base/default-wrap'
	import Prompt 		from 'base/prompt'

	export default{
		data() {
			return {
				bottoms 	: [{
					icon 	: 'ios-list-outline',
					to   	: '/record/lists?status=0',
					name    : '充值记录'
				},{
					icon 	: 'clipboard',
					to   	: '/record/lists?status=1',
					name    : '消费记录'
				}],
				data  		: [],
				params 		: {
					status  : 0,
					p  		: 1,
					limit 	: 8,
					model 	: 0
				},
				prompt 		: {
					title  	: '我的记录',
					text 	: '空空如也',
					hidden 	: true
				},
				activeTab   : 0,
				loading		: 0
			}
		},	
		created() {
			
		},
		methods: {
			getDataByStatus(status) {
				let params 				= this.params
					params.status 		= status
				this.prompt.hidden 		= false
				this.loading      		= true
				this.HttpService.getDataByStatus(params).then(data => {
					this.loading  		= false

					if(!data.length) {
						this.prompt.hidden = true
					}
				})
			},
			to(item, index) {
				this.activeTab = index
				this.getDataByStatus(index)
			}
		},
		watch: {
		},
		components: {
			Prompt
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0
	
	.bottom
		display: flex
		position: fixed
		left: 0
		right: 0
		bottom: 0
		height: 55px
		justify-content: center
		align-items: center	
		text-align: center
		border-top: 1px solid $mc
		background-color: #FFF
		.icon
			width: 100%
			font-size: 16px
		.bottom-item
			position: relative
			flex: 1
			&.active
				color: $mc
		&:after
			content: ''
			position: absolute
			right: 50%
			top: 0
			bottom: 0
			width: 1px
			background-color: $mc
	.record-list-body
		position: absolute
		left: 0
		top: 0
		right: 0
		bottom: 55px	
		overflow-y: scroll
		background-color: #FFF
		.record-list-item
			display: none
			&.active
				display: block	
	.cover
		position: absolute
		left: 0
		right: 0
		bottom: 0
		top: 0	
		background-color: #FFF
		
	.loading
		position: absolute
		left: 0
		right: 0
		top: 0
		bottom: 0
		z-index: 999
		width: auto
		height: auto
	
	.move-enter-active, .move-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.move-enter
		transform: translate3d(100%, 0, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
</style>